<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>

    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="../../assets/css/jquery-ui.min.css"/>

    <link rel="stylesheet" href="../../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
   <link rel="stylesheet" href="../../assets/css/admin.css">
    <link rel="stylesheet" href="../../assets/css/login/member.css">
</head>
<body>
<div class="head">
    <div class="header">
        <div class="header-cnt fn-clear">
            <h1 class="logo">
                <a href="" class="logo-img logo-img-jx" title="激想云商零售管理">
                    激想云商零售管理
                </a>
            </h1>
            <h2 class="logo-title">
                注册
            </h2>
            <ul class="jx-nav">
                <li class="nav-first">
                    <a href="../index.html">注册</a>
                </li>
                <li class="nav-last">
                    <a href="../index.html" target="_blank" seed="nav-link-advice">前往登录</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="regHeadBottom">
    <p class="headBottomTitle">创建您的云商帐户</p>
</div>
<div class="container">
    <div class="content">
        <div class="maincenter" style="position: relative">
            <ul id="myTab" class="nav nav-tabs">
                <li class="jx-tab-mobile active">
                    <a href="#mobileRegister" data-toggle="tab">
                        <i class="fa fa-mobile" aria-hidden="true"></i> 手机注册
                    </a>
                    <i class="fa fa-sort-desc" aria-hidden="true"></i>
                </li>
                <li class="jx-tab-email">
                    <a href="#emailRegister" data-toggle="tab">
                        <i class="fa fa-envelope" aria-hidden="true"></i> 邮箱注册</a>
                    <i class="fa fa-sort-desc" aria-hidden="true" style="position: absolute"></i>
                </li>
            </ul>
            <div id="myTabContent" class="tab-content maincenter-box full-box">
                <div class="tab-pane fade in active" id="mobileRegister">
                    <form class="form-horizontal ui-form" id="mobileRegForm" novalidate="novalidate">
                        <div class="ui-form-item">
                            <label class="ui-label">账户名</label>
                            <input id="J-accName" name="logonId" class="ui-input" type="text" placeholder="手机号"
                                   value="" autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="ui-form-item item-middle">
                            <label class="ui-label">校验码</label>
                            <input id="J-checkcode" name="picCheckCode" class="ui-input ui-input-checkcode first-elem"
                                   type="text" autocomplete="off" maxlength="4">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i>
                            </div>
                            <button type="button" class="jx-btn"> 获取校验码</button>
                        </div>
                        <div class="ui-form-item ui-form-item-checkbox">
                            <input id="J-agree" name="agree" checked="checked" class="ui-checkbox" type="checkbox">
                            <label for="J-agree" class="ui-checkbox-label">同意<a id="J-alipay-treaty" href="#"
                                                                                target="_blank">《激想云商零售管理服务协议》</a></label>
                        </div>
                        <div class="ui-form-item fn-pt14">
                            <div class="ui-button ui-button-morange">
                                <input id="J-mobile-submit" type="submit" value="下一步" class="ui-button-text">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane fade" id="emailRegister">
                    <form class="form-horizontal ui-form" id="emailRegForm" novalidate="novalidate">
                        <div class="ui-form-item">
                            <label class="ui-label">账户名</label>
                            <input id="J-accName1" name="logonId" class="ui-input" type="text" placeholder="电子邮箱"
                                   value="" autocomplete="off">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="ui-form-item">
                            <label for="J-checkcode1" class="ui-label">验证码</label>
                            <input id="J-checkcode1" name="picCheckCode" class="ui-input ui-input-checkcode" type="text"
                                   autocomplete="off" maxlength="4">
                            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                            aria-hidden="true"></i>
                            </div>
                            <img title="点击图片刷新验证码" class="ui-input-checkcode-img J-changeCheckcode" complete="complete"
                                 src="../../assets/images/code.png" alt="输入验证码" style="cursor:pointer;">
                            <a href="javascript:;" target="_blank" class="ui-form-other J-changeCheckcode"
                               id="J-forgetAccount">看不清？换一张</a>
                        </div>
                        <div class="ui-form-item ui-form-item-checkbox">
                            <input id="J-agree1" name="agree" checked="checked" class="ui-checkbox" type="checkbox">
                            <label for="J-agree1" class="ui-checkbox-label">同意<a id="" href="#"
                                                                                 target="_blank">《激想云商零售管理服务协议》</a></label>
                        </div>
                        <div class="ui-form-item fn-pt14">
                            <div class="ui-button ui-button-morange">
                                <input id="J-email-submit" type="submit" value="下一步" class="ui-button-text">
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-inner">
        <div class="footer-content">
            沪ICP备15052275号-2
        </div>
    </div>
</div>
<div id="sendEmailDialog" title="验证账户名" class="dialog-init">
    <div class="padding">
        <p class="ft-16">验证邮件已发送到邮箱tin***@groupjx.com</p>
        <p class="grey pb-10">请在小时内点击邮件中的链接继续注册。</p>
        <div class="email-tip">
            <span id="tip-trigger">还没收到邮件<i class="fa fa-caret-down" aria-hidden="true"></i></span>
        </div>
        <div id="tip-content" class="email-tip-content hidden">
            <ul class="tip-list">
                <li>请先检查是否在垃圾邮件中</li>
                <li>如果还未收到
                    <button>重新发送邮件</button>
                </li>
                <li>重新发送邮件，还未收到？请试试 <a href="index.html" class="orange">更换邮箱</a></li>
            </ul>
        </div>
    </div>

</div><!-- #dialog -->
<!--[if !IE]> -->
<script src="../../assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="../../assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script src="../../assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="../../assets/js/wizard.min.js"></script>
<script src="../../assets/js/jquery.validate.min.js"></script>
<!-- page specific plugin scripts -->
<script src="../../assets/js/jquery-ui.min.js"></script>
<!-- ace scripts -->
<script src="../../assets/js/ace-elements.min.js"></script>
<script src="../../assets/js/ace.min.js"></script>
</body>
<script>
    $(function () {
        //点击展开发送邮件失败提示
        $("#tip-trigger").click(function () {
            if ($(this).find("i").hasClass("fa-caret-down")) {
                $(this).find("i").addClass("fa-caret-up").removeClass("fa-caret-down");
                $("#sendEmailDialog").dialog("option", "height", 400);
            } else {
                $(this).find("i").addClass("fa-caret-down").removeClass("fa-caret-up");
                $("#sendEmailDialog").dialog("option", "height", 300);
            }
            $("#tip-content").toggleClass("hidden");
        });
        //表单验证
        $("#mobileRegForm").validate({
            /*onkeyup: function (element, event) {
                //去除左侧空格
                var value = this.elementValue(element).replace(/^\s+/g, "");
                $(element).val(value);
            },*/
            onfocusout: function (element, event) {
                var value = this.elementValue(element).replace(/\s|\xA0/g,"");
                $(element).val(value);
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element.next().find("i"));
            },
            rules: {
                logonId: {
                    required: true
                },
                picCheckCode: {
                    required: true,
                    minlength: 4
                }
            },
            messages: {
                logonId: {
                    required: "请输入手机号"
                },
                picCheckCode: {
                    required: "请输入验证码",
                    minlength: "验证码长度为4位"
                }
            },
            highlight: function (e) {
                $(e).closest('.ui-form-item').addClass('ui-form-item-error');
            },
            success: function (e) {
                $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
            },
            submitHandler: function (form) {
                window.location = './regComplete.html'
            },
            invalidHandler: function (form) {
            }
        });
        $("#emailRegForm").validate({
           /* onkeyup: function (element, event) {
                //去除左侧空格
                var value = this.elementValue(element).replace(/^\s+/g, "");
                $(element).val(value);
            },*/
            onfocusout: function (element, event) {
                var value = this.elementValue(element).replace(/\s|\xA0/g,"");
                $(element).val(value);
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element.next().find("i"));
            },
            rules: {
                logonId: {
                    required: true,
                    email: true
                },
                picCheckCode: {
                    required: true,
                    minlength: 4
                }
            },
            messages: {
                logonId: {
                    required: "请输入邮箱",
                    email: "请输入正确的邮箱格式"
                },
                picCheckCode: {
                    required: "请输入验证码",
                    minlength: "验证码长度为4位"
                }
            },
            highlight: function (e) {
                $(e).closest('.ui-form-item').addClass('ui-form-item-error');
            },
            success: function (e) {
                $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
            },
            submitHandler: function (form) {
                $("#sendEmailDialog").dialog('open');

            },
            invalidHandler: function (form) {
            }
        });
        //同意协议
        $("#J-agree,#J-agree1").change(function () {
            if (!$(this).is(":checked")) {//选中
                $("#J-mobile-submit,#J-email-submit").attr("disabled", true);
            } else {
                $("#J-mobile-submit,#J-email-submit").attr("disabled", false);
            }
        });
        //模态
        $("#sendEmailDialog").dialog({
            autoOpen: false,
            modal: true,
            dialogClass: "J-dialog",
            width: 600,
            height: 300
        });

    })

</script>
</html>